<template>
  <!-- 组件根标签 -->
  <div class="shouye">
    <!-- <h3>我是首页</h3> -->
    <!-- 1.搜索框部分 -->
    <div class="search">
      <van-icon name="coupon-o" class="menu" @click="menuShow" />
      <div class="cotent" @click="toSearch">
        <van-icon name="search" class="myicon" /> <span>搜索</span>
      </div>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-tabs v-model="tuiactive" color="#3296fa" animated @click="tabCheck">
        <!-- 3.文章内容展示部分 -->
        <van-tab
          :title="item.name"
          v-for="(item, index) in userPinlist"
          :key="index"
          :name="item.id"
        >
          <template #default>
            <xinwen
              @option="option"
              @star="star"
              @comment="comment"
              @toDetail="toDetail"
              :item="subitem"
              v-for="(subitem, subindex) in dataList"
              :key="subindex"
            ></xinwen>
          </template>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>

    <!-- 菜单的弹出层popup -->
    <van-popup
      class="pin"
      v-model="menushow"
      position="left"
      :style="{ width: '85%', height: '100%' }"
    >
      <div class="cha">
        <van-icon name="cross" class="chaicon" @click="closePin" />
      </div>
      <!-- 3.我的频道 -->
      <van-cell title="我的频道" size="large">
        <template #right-icon>
          <van-button
            plain
            type="danger"
            size="mini"
            round
            v-if="isEdit"
            @click="isEdit = false"
            >编辑</van-button
          >
          <van-button
            plain
            type="danger"
            size="mini"
            round
            v-else
            @click="isEdit = true"
            >完成</van-button
          >
        </template>
      </van-cell>
      <!--  叉叉列表 -->
      <div class="pinList">
        <template v-for="(item, index) in userPinlist">
          <div
            @click="changePin(index, item.id)"
            class="item"
            :class="{ activecolor: index === currentIndex }"
            :key="index"
          >
            {{ item.name }}
            <van-icon
              @click="deleted(index)"
              v-if="isEdit === false"
              name="cross"
              color="white"
              class="chacha"
            /></div
        ></template>
      </div>
      <!-- 推荐频道 -->
      <van-cell title="频道推荐" size="large"></van-cell>
      <div class="tuijianpinList">
        <div
          class="item"
          v-for="(item, index) in aaa"
          :key="index"
          @click="addPindao(index, item.id)"
        >
          <span><van-icon name="plus" />{{ item.name }}</span>
        </div>
      </div>
    </van-popup>

    <!-- 文章的设置的弹出面板 -->
    <van-popup
      class="one"
      v-model="optionshow1"
      :style="{ height: '20%', width: '80%' }"
    >
      <van-cell
        title="不感兴趣"
        icon="failure"
        @click="dislikethisatricle"
        v-if="islike === true"
      />
      <van-cell
        title="想要感兴趣"
        icon="failure"
        @click="quxiaodislikethisatricle"
        v-else
      />
      <van-cell title="反馈垃圾信息" icon="close" is-link @click="change" />
      <van-cell title="拉黑作者" icon="delete-o" v-if="!islaHei" />
      <van-cell title="不拉黑作者" icon="delete-o" v-else />
    </van-popup>
    <van-popup class="two" v-model="optionshow2" :style="{ width: '80%' }">
      <van-cell>
        <template #icon>
          <van-icon name="arrow-left" @click="change2" />
        </template>
      </van-cell>
      <van-cell
        :title="item"
        v-for="(item, index) in jvbaoList"
        :key="index"
        @click="jvbao(index)"
      />
    </van-popup>
  </div>
</template>
<script>
// import axios from 'axios'
import {
  getAllChannelList,
  channelNewsRecommend11,
  DislikeArticle,
  cancelDislike,
  reportArticle
} from './../../../api/news'
import {
  getUserChannelList,
  getUserChannelListReset
} from './../../../api/user'

export default {
  name: '',
  data () {
    return {
      // 下拉刷新的状态
      isLoading: false,
      // 喜不喜欢的状态
      islike: true,
      // 拉黑状态
      islaHei: false,
      // 时间戳
      timestamp: '',
      tuiactive: 0,
      menushow: false,
      isEdit: true,
      optionshow1: false,
      optionshow2: false,
      // 频道对应的id
      pinID: 0,
      // 当前所点击的/所在的频道
      currentIndex: 0,
      // 全部频道列表
      tuijianPinList: [],
      // 推荐频道返回的数据列表
      dataList: [],
      // 推荐频道
      tuijianpinList: [],
      // 对应频道id返回的列表
      dataListbyID: [],
      // 对应文章的id
      articleID: '',

      // 主页的频道列表
      userPinlist: ['颤三', '李四', '王五', '赵六', '甜腻'],
      // 左侧侧边栏中的推荐频道的＋号数组
      addList: ['你好啊', '我是你爸爸吧', '爷爷', '六舅', '白展堂子'],

      // 举报选项列表
      jvbaoList: [
        '其他问题',
        '标题夸张',
        '低俗色情',
        '错别字多',
        '旧闻重复',
        '广告软文',
        '内容不实',
        '涉嫌违法犯罪',
        '侵权'
      ]
    }
  },
  async created () {
    // 获取时间戳
    this.timestamp = new Date().getTime()

    // 1.获取主页的全部频道列表
    const res = await getAllChannelList()
    // console.log(res)
    this.pindaoList = res.data.data.channels
    console.log(this.pindaoList)
    // 页面一进去,就获得第一个频道对应的新闻数据新闻
    this.getPinbyID(this.pinID)

    // 获取用户的频道列表
    const reschacha = await getUserChannelList()
    // console.log('用户的叉叉列表', reschacha)
    this.userPinlist = reschacha.data.data.channels
    const aaa = this.userPinlist.map(item => {
      return item.id
    })
    // console.log(aaa)
    // 得到推荐频道列表
    this.tuijianpinList = this.pindaoList.filter(item => {
      return !aaa.includes(item.id)
    })
    console.log(this.tuijianpinList)
  },
  computed: {
    aaa () {
      return this.tuijianpinList
    }
  },
  methods: {
    // 下拉刷新
    async onRefresh () {
      await this.getPinbyID(this.pinID)

      this.$toast('刷新成功')
      this.isLoading = false
    },

    async bbb () {
      // 获取用户的频道列表
      const reschacha = await getUserChannelList()
      // console.log('用户的叉叉列表', reschacha)
      this.userPinlist = reschacha.data.data.channels
      const aaa = this.userPinlist.map(item => {
        return item.id
      })
      // console.log(aaa)
      // 得到推荐频道列表
      this.tuijianpinList = this.pindaoList.filter(item => {
        return !aaa.includes(item.id)
      })
    },
    // 点击搜索
    toSearch () {
      this.$router.push('/search')
    },
    // 显示设置文章的操作
    option (autid) {
      this.optionshow1 = true
      // 改到当前文章的id
      this.articleID = autid
    },
    change () {
      this.optionshow1 = !this.optionshow1
      this.optionshow2 = !this.optionshow2
    },
    change2 () {
      this.optionshow1 = !this.optionshow1
      this.optionshow2 = !this.optionshow2
    },

    // 左侧的叉叉栏索引位置的切换
    changePin (index, id) {
      // console.log(this.currentIndex, index, id)
      // 关闭左侧拉出栏
      // this.menushow = false
      // 用户所拥有的频道进行对应显示
      this.currentIndex = index
      this.tuiactive = id

      // 获取数据
      // this.getPinbyID(id)
    },

    // tab栏的切换
    tabCheck (id, titile) {
      console.log('tab栏被点击了', id, titile)
      this.getPinbyID(id)
    },

    // 文章点赞
    star (id) {
      console.log(id)
    },
    // 评论文章
    comment (id) {
      console.log(id)
    },
    // 跳转到文章详情页面,并且携带此文章的详情的对象的id
    toDetail (id) {
      console.log(id)
      this.$router.push(`/articleDetail/${id}`)
    },

    // 显示菜单列表
    menuShow () {
      this.menushow = true
    },
    // 关闭频道弹框
    closePin () {
      this.menushow = false
    },
    // 获取全部频道的列表

    // 左侧侧边栏删除叉叉
    async deleted (index) {
      // 删除叉叉数组中的此元素
      this.userPinlist.splice(index, 1)
      const ccc = this.userPinlist.slice(1)
      const bbb = []
      for (let i = 0; i < ccc.length; i++) {
        bbb.push({ id: ccc[i].id, seq: i + 2 })
      }
      console.log(bbb)
      const res = await getUserChannelListReset({ channels: bbb })
      this.bbb()
      console.log(res)
    },
    // 左侧侧边栏添加频道
    async addPindao (index, id) {
      // // 添加到叉叉数组中
      console.log(this.addList[index])
      this.userPinlist.push(this.tuijianpinList[index])
      const ccc = this.userPinlist.slice(1)
      const bbb = []
      for (let i = 0; i < ccc.length; i++) {
        bbb.push({ id: ccc[i].id, seq: i + 2 })
      }
      console.log(bbb)
      const res = await getUserChannelListReset({
        channels: bbb,
        id: id,
        seq: index
      })
      this.bbb()
      console.log(res)
    },

    // 封装获取对应频道的数据列表的方法
    async getPinbyID (id) {
      const res2 = await channelNewsRecommend11({
        channel_id: id,
        timestamp: this.timestamp,
        with_top: 0
      })
      this.pinID = id
      // console.log(res2)
      console.log('此频道的id为:', this.pinID)
      this.dataList = res2.data.data.results
    },

    // 不喜欢此文章
    async dislikethisatricle () {
      const dislike = await DislikeArticle({
        target: this.articleID
      })
      console.log('我不喜欢这个文章', dislike)
      this.$toast.success('我不喜欢你了')
      this.optionshow1 = false
      this.islike = false
    },
    // 取消不喜欢此文章
    async quxiaodislikethisatricle () {
      const quxiaodislike = await cancelDislike(this.articleID)
      console.log('取消了不喜欢这个文章', quxiaodislike)
      this.$toast.success('你又喜欢我了')
      this.optionshow1 = false
      this.islike = true
    },
    // 拉黑作者
    // async laheii () {
    //   const laheii = await blackUser({
    //     target: this.articleID
    //   })
    //   console.log('我拉黑你了', laheii)
    //   this.$toast.success('拉黑你')
    //   this.optionshow1 = false
    //   this.islike = false
    // }

    // 举报文章
    async jvbao (index) {
      const jvbao = await reportArticle({
        target: this.articleID,
        type: index
      })
      console.log('朝阳群众牛逼', jvbao)
      this.$toast.success('举报成功')
      this.optionshow1 = false
      this.optionshow2 = false
    }
  },
  components: {}
}
</script>
<style lang="less" scoped>
.shouye {
  .search {
    height: 44px;
    background-color: #3296fa;
    padding: 7px;
    display: flex;
    align-items: center;
    .menu {
      margin-right: 20px;
      color: white;
    }
    .cotent {
      height: 100%;
      width: 287px;
      background-color: #5babfb;
      border-radius: 22px;
      text-align: center;
      font-size: 16px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      .myicon {
        font-size: 25px;
      }
      span {
      }
    }
  }

  .pin {
    .cha {
      padding: 10px;

      .chaicon {
      }
    }
    .pinList {
      padding: 10px;
      display: flex;
      font-size: 14px;
      flex-wrap: wrap;
      .item {
        position: relative;
        background-color: grey;
        padding: 5px 10px;
        color: white;
        margin: 5px;
        .chacha {
          position: absolute;
          top: -8px;
          right: -8px;
          background-color: red;
          border-radius: 50%;
        }
      }
      .activecolor {
        color: rgb(1, 255, 14);
      }
    }
    .tuijianpinList {
      padding: 10px;
      display: flex;
      font-size: 14px;
      flex-wrap: wrap;
      .item {
        background-color: grey;
        padding: 5px 10px;
        color: white;
        margin: 5px;
      }
    }
  }
}
</style>
